<template>
    <div class="news-container">
        <div class="news-header">
            <div class="news-title">{{newsContent.Theme}}</div>
            <div class="news-tips">
                <div class="news-time" v-if="newsContent.Time!=null">{{newsContent.Time}}</div>
                <div class="news-time" v-else>&nbsp;&nbsp;</div>
                <div class="news-view">{{newsContent.Pageview}}&nbsp;&nbsp;浏览</div>
            </div>
        </div>
        <div class="news-img">
            <img :src="newsContent.ThemeImage" alt="">
        </div>
        <div class="news-text" v-html="newsContent.Content"></div>
        <div class="news-share">
            <div class="share-btn" @click="shareNews">
                <span>分享</span>
                <img src="../assets/img/icon_share.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery';
import wx from 'weixin-js-sdk';
export default {
    name: 'wxArticle',
    data() {
        return {
            newsContent: {}
        };
    },
    created() {
        var that = this;
        if (this.$route.params.id) {
            $.ajax({
                typr: 'GET',
                url: that.baseUrl + '/api/consult/getNewsById/' + that.$route.params.id,
                success: function(res) {
                    console.log(res);
                    that.newsContent = res;
                }
            });
        }
    },
    methods: {
        shareNews() {
            var that = this;
            wx.miniProgram.navigateTo({ url: '/pages/minDetailsShare/minDetailsShare?id=' + that.$route.params.id + '&st=' + that.$route.query.st});
        }
    }
};
</script>

<style>
.news-container{
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.news-container img{
    width: 100%;
    height: auto;
}
.news-header{
    width: 100%;
    padding: 4vw;
    box-sizing: border-box;
}
.news-title{
    width: 100%;
    text-align: left;
    line-height: 6.4vw;
    font-size: 4.26vw;
    letter-spacing: 0.12vw;
    color: #232323;
}
.news-tips{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.news-view{
    font-size: 2.66vw;
    color: #828282;
}
.news-img,.news-text{
    width: 92%;
}
.news-share{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5vw 0;
}
.share-btn{
    display: flex;
    width: 22.66vw;
    height: 9.33vw;
    margin: 0 auto;
    line-height: 9.33vw;
    font-size: 4.26vw;
    border-radius: 4.67vw;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #2e89f9, #4dcbfa);
    color: #fff;
}
.share-btn>img{
    width: 5.33vw;
}
</style>
